<template>
    <div class="GO-staff-info-wrap">
        <div class="search-area">
            <h5 class="item-title">
                <span>选择配置的采购项</span>
            </h5>
            <el-select v-model="departmentId" placeholder="请选择需要配置的采购项" :style="{ width: '250px' }" @change="selectDepartmentFun">
                <el-option v-for="(item, index) in departmentList" :label="item.departName" :value="item.id" :key="index"></el-option>
            </el-select>
            <!--<el-select v-model="searchForm.allBumen" placeholder="全部部门" :style="{ width: '150px' }">
                <el-option label="销售部" value="1"></el-option>
                <el-option label="技术部" value="2"></el-option>
                <el-option label="客服部" value="3"></el-option>
                <el-option label="市场部" value="4"></el-option>
                <el-option label="公关部" value="4"></el-option>
            </el-select>-->
         <!--   <el-button type="primary" @click="setStaffDialog = true" style="color: #F9D532;width: 110px;height: 36px;background: #333333;border-style: none;">设置花名册</el-button> -->
			   <el-button type="primary" @click="uploadFile()" style="color: #F9D532;width: 110px;height: 36px;background: #333333;border-style: none;">下载模板</el-button>
            <el-button type="primary" @click="openAddStaffDialog" style="color: #F9D532;width: 110px;height: 36px;background: #333333;border-style: none;">添加员工</el-button>
          <!--  <el-button type="primary" style="color: #F9D532;width: 110px;height: 36px;background: #333333;border-style: none;">批量导入</el-button> -->
	<el-upload class="upload-btn"
	 v-loading="loading"
	 element-loading-text="导入中,请稍等"
	action="https://jsonplaceholder.typicode.com/posts/"
	:on-preview="handlePreview"
	  :on-remove="handleRemove"
	  :before-remove="beforeRemove"
	  name="myFileNames"
	  multiple
	  :limit="3"
	  :on-exceed="handleExceed"
	  :file-list="fileList"
	   :http-request="imageChange">
	    <el-button type="primary" style="color: #F9D532;width: 110px;height: 36px;background: #333333;border-style: none;">批量导入</el-button>
	</el-upload>




            <el-button type="primary" style="color: #F9D532;width: 110px;height: 36px;background: #333333;border-style: none;"  @click="cleardepart">清空</el-button>

        </div>
        <h5 class="item-title">
            <span>采购项花名册</span>
			 <span>总人数: 	{{sumNumber}}</span>
			  <span>男性人数:{{manNumber}}</span>
			    <span>女性人数:{{womenNumber}}</span>
        </h5>
        <!--员工花名册 start-->
        <el-table :data="staffTableData" class="staff-table" style="width: 100%,height:1000px">
            <el-table-column label="序号" prop="number"  type="index" align="center"></el-table-column>
            <el-table-column prop="customerName" label="员工姓名" align="center"></el-table-column>
            <el-table-column prop="customerCode" label="员工工号" align="center"></el-table-column>
            <el-table-column prop="sex" label="性别" align="center">
                <template slot-scope="props">
                    <span>{{ props.row.sex == 1 ? '男' : '女' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="departId" label="子部门" align="center">
                <template slot-scope="props">
                    <span>{{ curDepartment.departName }}</span>
                </template>
            </el-table-column>
			  <el-table-column prop="defaultValue1" label="部门1" align="center"></el-table-column>
			   <el-table-column prop="defaultValue2" label="部门2" align="center"></el-table-column>
			     <el-table-column prop="defaultValue3" label="部门3" align="center"></el-table-column>
				  <el-table-column prop="defaultValue4" label="部门4" align="center"></el-table-column>
				    <el-table-column prop="defaultValue5" label="部门5" align="center"></el-table-column>
					  <el-table-column prop="defaultValue6" label="部门6" align="center"></el-table-column>
					   <el-table-column prop="remark" label="备注" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="props">
                    <el-button type="text" size="small" :style="{ color: '#D5A606' }" @click="deletecustomer(props.row.id)" >删除</el-button>
                    <el-button type="text" size="small" :style="{ color: '#D5A606' }" @click="openupdateStaffDialog(props.row.id)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--员工花名册 end-->



        <el-pagination v-if="staffTableData.length"
		 background layout="prev, pager, next"
		 :total="pageTotal"
		 :current-page.sync="currentPage"
		  :page-size="pageSize"
		  @next-click="currentPage+=1,handleCurrentChange"
		  @prev-click="currentPage-=1,handleCurrentChange"
		  @current-change="handleCurrentChange">
		  </el-pagination>
        <!--设置员工花名册 start-->
        <el-dialog title="设置花名册" :visible.sync="setStaffDialog" width="370px" :close-on-click-modal="false" class="set-staff-dialog">
            <el-form :model="setStaffFrom" ref="addSectionForm" label-width="100px" class="set-staff-form">
                <el-form-item label="员工姓名" required>
                    <el-input v-model="setStaffFrom.name"></el-input>
                    <span class="right-text">列</span>
                </el-form-item>
                <el-form-item label="员工编号" required>
                    <el-input v-model="setStaffFrom.number"></el-input>
                    <span class="right-text">列</span>
                </el-form-item>
                <el-form-item label="性别" required>
                    <el-input v-model="setStaffFrom.sex"></el-input>
                    <span class="right-text">列</span>
                </el-form-item>
                <el-form-item class="form-btn-area">
                    <el-button @click="setStaffDialog = false">取 消</el-button>
                    <el-button type="primary" @click="enterSetStaff">保 存</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--设置员工花名册 end-->
        <!--添加员工 start-->
        <el-dialog title="添加员工" :visible.sync="addStaffDialog" width="490px" :close-on-click-modal="false" class="add-staff-dialog">
            <el-form :model="addStaffFrom" ref="addSectionForm" label-width="0" class="set-staff-form">
                <el-form-item required>
                   员工姓名 <el-input v-model="addStaffFrom.customerName" placeholder="请输入员工姓名" style="width: 250px;margin-left: 6px"></el-input>
                </el-form-item>
				<el-form-item required>
				   员工工号 <el-input v-model="addStaffFrom.customerCode" placeholder="请输入员工编号" style="width: 250px;margin-left: 6px"></el-input>
				</el-form-item>
				<el-form-item required>
				     &nbsp;&nbsp; &nbsp;&nbsp;部门1<el-input v-model="addStaffFrom.defaultValue1" placeholder="部门1" style="width: 250px;margin-left: 11px"></el-input>
				</el-form-item>
				<el-form-item required>
				    &nbsp;&nbsp; &nbsp;&nbsp;部门2<el-input v-model="addStaffFrom.defaultValue2" placeholder="部门2" style="width: 250px;margin-left: 11px"></el-input>
				</el-form-item>
				<el-form-item required>
				    &nbsp;&nbsp; &nbsp;&nbsp;部门3<el-input v-model="addStaffFrom.defaultValue3" placeholder="部门3" style="width: 250px;margin-left: 11px"></el-input>
				</el-form-item>
				<el-form-item required>
				    &nbsp;&nbsp; &nbsp;&nbsp;部门4<el-input v-model="addStaffFrom.defaultValue4" placeholder="部门4" style="width: 250px;margin-left: 11px"></el-input>
				</el-form-item>
				<el-form-item required>
				    &nbsp;&nbsp; &nbsp;&nbsp;部门5<el-input v-model="addStaffFrom.defaultValue5" placeholder="部门5" style="width: 250px;margin-left: 11px"></el-input>
				</el-form-item>
				<el-form-item required>
				    &nbsp;&nbsp; &nbsp;&nbsp;部门6<el-input v-model="addStaffFrom.defaultValue6" placeholder="部门6" style="width: 250px;margin-left: 11px"></el-input>
				</el-form-item>
               <el-form-item required>
                    &nbsp;&nbsp; &nbsp;&nbsp;备注<el-input v-model="addStaffFrom.remark" placeholder="请输入备注" style="width: 250px;margin-left: 18px"></el-input>
                </el-form-item>
                <el-form-item required>
                    <el-radio-group v-model="addStaffFrom.sex">
                        <el-radio-button label="1">男</el-radio-button>
                        <el-radio-button label="2">女</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item class="form-btn-area">
                    <el-button @click="addStaffDialog = false">取 消</el-button>
                    <el-button type="primary" @click="enterAddStaff">保 存</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--添加员工 end-->





		<!--编辑员工 start-->
		<el-dialog title="编辑员工" :visible.sync="updateStaffDialog" width="490px" :close-on-click-modal="false" class="add-staff-dialog">
		    <el-form :model="updateStaffFrom" ref="addSectionForm" label-width="0" class="set-staff-form">
		        <el-form-item required>
		            员工姓名<el-input v-model="updateStaffFrom.customerName" placeholder="请输入员工姓名" style="width: 250px;margin-left: 6px"></el-input>
		        </el-form-item>
				<el-form-item required>
				    员工工号<el-input v-model="updateStaffFrom.customerCode" placeholder="请输入员工编号" style="width: 250px;margin-left: 6px"></el-input>
				</el-form-item>
				<el-form-item required>
				    &nbsp;&nbsp; &nbsp;&nbsp;部门1<el-input v-model="updateStaffFrom.defaultValue1" placeholder="部门1" style="width: 250px;margin-left: 11px" ></el-input>
				</el-form-item>
				<el-form-item required>
				    &nbsp;&nbsp; &nbsp;&nbsp;部门2<el-input v-model="updateStaffFrom.defaultValue2" placeholder="部门2" style="width: 250px;margin-left: 11px"></el-input>
				</el-form-item>
				<el-form-item required>
				    &nbsp;&nbsp; &nbsp;&nbsp;部门3<el-input v-model="updateStaffFrom.defaultValue3" placeholder="部门3" style="width: 250px;margin-left: 11px"></el-input>
				</el-form-item>
				<el-form-item required>
				    &nbsp;&nbsp; &nbsp;&nbsp;部门4<el-input v-model="updateStaffFrom.defaultValue4" placeholder="部门4" style="width: 250px;margin-left: 11px"></el-input>
				</el-form-item>
				<el-form-item required>
				   &nbsp;&nbsp; &nbsp;&nbsp;部门5 <el-input v-model="updateStaffFrom.defaultValue5" placeholder="部门5" style="width: 250px;margin-left: 11px"></el-input>
				</el-form-item>
				<el-form-item required>
				    &nbsp;&nbsp; &nbsp;&nbsp;部门6<el-input v-model="updateStaffFrom.defaultValue6" placeholder="部门6" style="width: 250px;margin-left: 11px"></el-input>
				</el-form-item>
		       <el-form-item required>
		            &nbsp;&nbsp; &nbsp;&nbsp;备注<el-input v-model="updateStaffFrom.remark" placeholder="备注" style="width: 250px;margin-left: 18px"></el-input>
		        </el-form-item>
		        <el-form-item required>
		            <el-radio-group v-model="updateStaffFrom.sex">
		                <el-radio-button label="1">男</el-radio-button>
		                <el-radio-button label="2">女</el-radio-button>
		            </el-radio-group>
		        </el-form-item>
		        <el-form-item class="form-btn-area">
		            <el-button @click="updateStaffDialog = false">取 消</el-button>
		            <el-button type="primary" @click="enterupdateStaff">保 存</el-button>
		        </el-form-item>
		    </el-form>
		</el-dialog>
		<!--编辑员工 end-->
    </div>
</template>

<script>
    let storage = window.localStorage;

	import {getAction,postAction,getFileAccessHttpUrl} from "@/api/manage";
    import { gethmclist, getDepartmentall, addcustomer,deleteCustomer,cleardepart,downloadmoban,hmcaddcustomer } from '@/api/group-order';

    export default {

        name: 'staffInfo',
        data() {
            return {
				womenNumber:0,
				manNumber:0,
				sumNumber:0,
				  loading: false,
				pageTotal: '', // 总条目
				pageSize: 10, // 页面大小
				currentPage: 1, // 当前页
				currentId:'',
                // 部门列表
                departmentList: [],
                departmentId: null,
                //部门列表数据
                staffTableData: [],
                staffPageSize: 10,
                staffPageNo: 1,
                staffPageTotal: 0,
                url:{
					downloadmoban:"/customer/downloadmoban",
					cleardepart:"/customer/cleardepart",
					gethmccustdetail:"/company/gethmccustdetail",
					hmcupdatecustomer:"/company/hmcupdatecustomer",
					importExcel:"/customer/importExcel",
				},
                setStaffDialog: false,
				updateStaffDialog:false,
                setStaffFrom: {
                    name: '',
                    number: '',
                    sex: ''
                },
                addStaffDialog: false,
                addStaffFrom: {
                    customerCode: '',
                    customerName: '',
                    sex: '',
					defaultValue1:'',
					defaultValue2:'',
					defaultValue3:'',
					defaultValue4:'',
					defaultValue5:'',
					defaultValue6:'',
					remark:''
                },
				updateStaffFrom: {
				    customerCode: '',
				    customerName: '',
				    sex: '',
					defaultValue1:'',
					defaultValue2:'',
					defaultValue3:'',
					defaultValue4:'',
					defaultValue5:'',
					defaultValue6:'',
					remark:''
				}
            };
        },
        computed: {
            curDepartment() {
                let that = this,
                    curItem;
                curItem = that.departmentList.find(v => {
                    return that.departmentId == v.id;
                });
                return curItem;
            }
        },
        created() {
            let that = this;
            //获取部门
            getDepartmentall({
                customerId: storage.getItem('customerId'),
                pageSize: 1000,
                pageNo: 1
            }).then(res => {
                if (res.status == 200 && res.data.code == 0) {
                    that.loaded = true;
                    let getData = res.data;
                    getData.data.forEach(v => {
                        that.departmentList.push(v);
                    });
                }
            });
        },
        methods: {
			 // 分页触发请求
			 handleCurrentChange(val) {
			   this.currentPage = val
			   this.gethmclistData()
			 },
		       // 提交图片
		        imageChange(param){
					this.loading=true;
					console.log("输出看一看"+this.departmentId);
					if (this.departmentId==null) {
					  this.$message.success("请先选择部门")
					  	this.loading=false;
					  return;
					}
		            let formData = new FormData()
		            formData.append('myFileNames', param.file);
					formData.append('departId', this.departmentId);
		        formData.append('parentId',storage.getItem("customerId"));
		         postAction(domain.publicUrl + this.url.importExcel,
		    //          departId: this.departmentId,
					 // myFileNames:param.file
					 formData
		          ).then(res => {
					  if(res.data.code==0){
						 this.gethmclistData();
						  	this.loading=false;
					  }else{
						    this.$message.error(res.data.data);
						  	this.loading=false;
					  }

		          })
		        },

			/* 文件下载 */
			uploadFile(){
			  let url = getFileAccessHttpUrl(domain.publicUrl+"/customer/downloadmoban")
			  window.open(url);
			},


			//清空部门方法
			cleardepart(){
				if (!this.departmentId) {
				  this.$message.error("请先选择部门")
				}else{
				     cleardepart({
						 departId:this.departmentId
					 }).then(res => {
						  this.gethmclistData();
                           this.$message.success("清除成功")

                      });
				}
			},

			//删除花名册员工
			deletecustomer(id){
				  deleteCustomer(
				  {
					  id:id
				  }).then(res => {
						  this.gethmclistData();
                           this.$message.success("删除成功")
                      });
				},

			//下载模板
			downloadmoban(){
				downloadmoban();
			},
            /**
             * @Date: 2020-11-04 22:49:31
             * @LastEditors: qwguo
             * @description: 更改部门方法
             * @param {type} 参数说明
             * @return: 返回值
             */
            selectDepartmentFun() {
                this.gethmclistData();
            },
            /**
             * @Date: 2020-11-04 22:48:05
             * @LastEditors: qwguo
             * @description: 查询部门花名册
             * @param {type} 参数说明
             * @return: 返回值
             */
            gethmclistData() {
                let that = this;
                that.staffTableData.splice(0, that.staffTableData.length);
                gethmclist({
					 pageNo: this.currentPage,
                    departId: that.departmentId
                }).then(res => {
                    if (res.status == 200 && res.data.code == 0) {

						this.womenNumber= res.data.womenNumber;
						this.manNumber= res.data.manNumber;
						this.sumNumber= res.data.sumNumber;
						this.pageTotal = res.data.data.total;
						this.pageSize = res.data.data.size;
                        let getData = res.data.data;
                        getData.records.forEach(v => {
                            that.staffTableData.push(v);
                        });
                    }
                });
            },
            /**
             * @Date: 2020-11-04 22:53:45
             * @LastEditors: qwguo
             * @description: 选择页码方法
             * @param {type} 参数说明
             * @return: 返回值
             */
            staffChangePage(index) {
                this.staffPageTotal = 0;
                this.staffPageNo = index;
                this.gethmclistData();
            },
            enterSetStaff() {
                this.setStaffDialog = false;

            },
            openAddStaffDialog() {
                let that = this;
                if (!that.departmentId) {
                    // that.$message({
                    //     message: '请先选择部门',
                    //     type: 'warning'
                    // });
					   this.$message.error("请先选择部门")
                } else {
                    that.addStaffDialog = true;
					//打开新增窗口的时候清空一下
					that.addStaffFrom.customerCode='';
					that.addStaffFrom.customerName= '';
					that.addStaffFrom.defaultValue1= '';
					that.addStaffFrom.defaultValue2= '';
					that.addStaffFrom.defaultValue3= '';
					that.addStaffFrom.defaultValue4= '';
					that.addStaffFrom.defaultValue5= '';
					that.addStaffFrom.defaultValue6= '';
            	    that.addStaffFrom.remark= '';
                }
            },
			openupdateStaffDialog(id){
				this.currentId=id;
				console.log("看一看id是多少哦"+this.currentId);
				 this.updateStaffDialog = true;
				 getAction(domain.publicUrl + this.url.gethmccustdetail, {
				     'id':id
				 }).then(res => {
				 this.updateStaffFrom.customerCode=res.data.data.customerCode;
				  this.updateStaffFrom.customerName=res.data.data.customerName;
				   this.updateStaffFrom.defaultValue1=res.data.data.defaultValue1;
				    this.updateStaffFrom.defaultValue2=res.data.data.defaultValue2;
					 this.updateStaffFrom.defaultValue3=res.data.data.defaultValue3;
					  this.updateStaffFrom.defaultValue4=res.data.data.defaultValue4;
					   this.updateStaffFrom.defaultValue5=res.data.data.defaultValue5;
					    this.updateStaffFrom.defaultValue6=res.data.data.defaultValue6;
						  this.updateStaffFrom.sex=res.data.data.sex;
						  this.updateStaffFrom.remark=res.data.data.remark;
				 })
			},


			enterupdateStaff(){
				postAction(domain.publicUrl + this.url.hmcupdatecustomer, {
				    'id':this.currentId,
					customerName: this.updateStaffFrom.customerName,
					   token: storage.getItem('token'),
					   customerCode: this.updateStaffFrom.customerCode,
										         sex: this.updateStaffFrom.sex,
					  defaultValue1:this.updateStaffFrom.defaultValue1,
					  defaultValue2:this.updateStaffFrom.defaultValue2,
					  defaultValue3:this.updateStaffFrom.defaultValue3,
					  defaultValue4:this.updateStaffFrom.defaultValue4,
										 defaultValue5:this.updateStaffFrom.defaultValue5,
										  defaultValue6:this.updateStaffFrom.defaultValue6,
										   remark:this.updateStaffFrom.remark
				}).then(res => {
					  if (res.status == 200 && res.data.code == 0) {
				this.$message.success("修改成功");
				  this.gethmclistData();
				  this.updateStaffDialog=false;
				  }else{
					   this.$message.success(res.data.data);
				  }
				})
			},
            /**
             * @Date: 2020-11-05 22:32:14
             * @LastEditors: qwguo
             * @description: 添加员工确定方法
             * @param {type} 参数说明
             * @return: 返回值
             */
            enterAddStaff() {
                let that = this;
                that.setStaffDialog = false;
                let addStaffFrom = that.addStaffFrom;
                hmcaddcustomer({
                    customerName: addStaffFrom.customerName,
                    token: storage.getItem('token'),
					parentId:storage.getItem("customerId"),
                    isCompany: 0,
                    departId: that.departmentId,
                    customerCode: addStaffFrom.customerCode,
					         sex: addStaffFrom.sex,
				 defaultValue1:addStaffFrom.defaultValue1,
				  defaultValue2:addStaffFrom.defaultValue2,
				   defaultValue3:addStaffFrom.defaultValue3,
				    defaultValue4:addStaffFrom.defaultValue4,
					 defaultValue5:addStaffFrom.defaultValue5,
					  defaultValue6:addStaffFrom.defaultValue6,
					  remark:addStaffFrom.remark
                }).then(res => {
                    if (res.status == 200 && res.data.code == 0) {
                        that.setStaffDialog = false;
                        that.gethmclistData();
						 this.$message.success("添加成功");
						   that.addStaffDialog = false;
                        // storage.setItem('customerId', res.data.msg);
                    }else{
						 this.$message.success(res.data.data);
					}
                });
                console.log(123);
            }
        }
    };
</script>

<style lang="scss">
    .GO-staff-info-wrap {
        .item-title {
            height: 27px;
            border-left: 5px solid #6f6f6f;
            display: flex;
            align-items: center;
            margin: 0 0 20px 0;
            font-weight: 400;

            span {
                margin-left: 24px;
                font-size: 15px;
            }
        }
        .search-area {
            .el-select {
                margin-right: 10px;
            }
            margin-bottom: 20px;
			.upload-btn {
			    display: inline-block;
			    margin: 0 10px;
			}
        }
        .staff-table {
            thead {
                th {
                    background-color: #3c3c3c;
                    color: #fcec83;
                    border-right: 1px solid #fff;
                }
            }
            tbody {
                td {
                    background-color: #f9f9f9;
                    border-right: 1px solid #fff;
                }
            }
        }
        .el-pagination {
            text-align: right;
        }
        .set-staff-form {
            .right-text {
                position: absolute;
                right: 10px;
                top: 0;
            }
            .form-btn-area {
                border-top: 1px solid #ccc;
                padding: 30px 0 0 0;
                margin: 0;
                text-align: right;
            }
        }
        .el-radio-group {
            .el-radio-button {
                margin-right: 10px;
                .el-radio-button__inner {
                    border: 1px solid rgba(242, 242, 242, 1);
                    border-radius: 5px;
                    padding: 12px 0;
                    color: #9d9d9d;
                    width: 106px;
                    font-weight: 400;
                }
                &:hover {
                    .el-radio-button__inner {
                        box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.129411764705882);
                        border-radius: 5px;
                        color: rgb(74, 74, 74);
                        border-color: #000;
                        font-weight: 700;
                    }
                }
                &.is-active {
                    .el-radio-button__inner {
                        background-color: #575757;
                        color: #ffe56d;
                        box-shadow: none;
                        font-weight: 700;
                    }
                }
            }
        }
    }
</style>
